<template>
	<el-dialog
		:width="width"
		:visible="visible"
		:close-on-click-modal="false"
		:append-to-body="appendToBody"
		@open="open"
		@opened="opened"
		@close="close"
		@closed="closed"
	>
		<template #title>
			<div class="title">
				<span>{{title}}</span>
			</div>
		</template>
		<div ref="dialogBody" class="dialog-body" :style="{'height':height}">
			<slot></slot>
		</div>
		<template #footer>
			<slot name="footer"></slot>
		</template>
	</el-dialog>
</template>
<script>
export default {
	name      : "WDialog",
	components: {},
	props     : {
		//对话框
		visible     : {
			type    : Boolean,
			required: true,
		},
		width       : {
			type   : String,
			default: '500px'//'80%'
		},
		height      : {
			type   : String,
			default: 'auto'//'75vh'
		},
		//
		title       : {
			type    : String,
			required: true
		},
		//
		appendToBody: {
			type   : Boolean,
			default: false
		},
	},
	data() {
		return {}
	},
	computed  : {},
	watch     : {},
	methods   : {
		open() {
			this.$emit('open')
		},
		opened() {
			this.$emit('opened')
		},
		//对话框关闭的时候
		close() {
			this.$refs.dialogBody.scrollTop = 0
			this.$emit('update:visible', false)
		},
		closed() {
			this.$emit('closed')
		}
	},
	mounted() {
	},
}
</script>
<style lang="scss" scoped>
	@import "~@/assets/css/_variables.scss";

	.title {
		$h: 30px;
		width: 100%;
		height: $h;
		line-height: $h;
		font-size: 16px;
		font-weight: 400;
		color: #464646;
		border-bottom: 1px solid rgba(77, 116, 251, 0.3);

		> span {
			display: inline-block;
			padding: 0 4px;
			height: $h;
			line-height: $h;
			border-bottom: 2px solid rgba(62, 96, 251, 1);
		}
	}

	.dialog-body {
		overflow: auto;
		@include flex-column();
		@include flex-1();
	}
</style>
